<template>
  <div class="sk-box">
    <ul class="top">
      <!-- 倒计时 -->
      <li class="countdown">
        <span>嗨购秒杀</span>
        <span class="time">14点场</span>
        <van-count-down :time="time">
          <template #default="timeData">
            <span class="block" v-html="getTime(timeData.days)"></span>
            <span class="colon">:</span>
            <span class="block" v-html="getTime(timeData.minutes)"></span>
            <span class="colon">:</span>
            <span class="block" v-html="getTime(timeData.seconds)"></span>
          </template>
        </van-count-down>
      </li>
      <li class="right">
        <span>爆款轮番秒</span>
        <div class="arrow"><div class="text">&gt;</div></div>
      </li>
    </ul>
    <ul class="list">
      <li
        v-for="(goods, index) in goodsList"
        :key="index"
        @click="getDetail(goods.proid)"
      >
        <img :src="goods.img1" />
        <span class="originprice">￥{{ goods.originprice }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SecondKill",
  data() {
    return {
      time: 1000 * 60 * 60,
      goodsList: [],
    };
  },
  methods: {
    getDetail(proid) {
      
      this.$router.push("/GoodsDetail/" + proid);
    },
    getTime(res) {
      if (res.toString().length < 2) {
        return "0" + res;
      } else {
        return res;
      }
    },
  },
  created() {
    this.$http.get("pro/seckilllist").then((data) => {
      let res = data.data;
      if (res.code == "200") {
        
        this.goodsList = res.data;
      }
    });
  },
};
</script>

<style scoped>
.sk-box {
  height: 8.125rem;
  background: white;
  border-radius: 1.25rem;
  padding: 0 0.625rem;
}
.sk-box .top {
  height: 1.875rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  align-items: center;
}
.right {
  color: #ff6666;
  display: flex;
  align-items: center;
}
.arrow {
  border-radius: 50%;
  background: #ff6666;
  color: #fff;
  width: 0.625rem;
  height: 0.625rem;
  text-align: center;
  line-height: 0.625rem;
  margin-left: 0.3125rem;
}
.arrow .text {
  transform: scale(0.7);
}
/* 倒计时样式 */
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
  font-weight: 700;
}
.block {
  display: inline-block;
  width: 18px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
  border-radius: 5px;
}
.countdown {
  display: flex;
  line-height: 1.875rem;
  position: relative;
  align-items: center;
}
.time {
  color: #ff6666;
  margin: 0 0.625rem;
}
.van-count-down {
  height: 1.875rem;
  display: flex;
  align-items: center;
}

/* 商品列表区域 */
.list {
  height: 5.9375rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 0.3125rem;
}
.list li {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list li img {
  width: 3.375rem;
  height: 3.375rem;
}
.list li .originprice {
  font-size: 12px;
  color: #ff6666;
  margin-top: 0.625rem;
  font-weight: 700;
}
</style>